<template>
  <section class="sec side z-nodeal"
           v-if="list&&list.length>0"
           v-clickoutside='clickOut'>
    <p class="p1"
       v-if="!topShow">{{topText}}</p>
    <el-row class="tac">
      <el-col :span="12">
        <el-menu :class="['el-menu-vertical-demo',{'row':topShow?true:false}]"
                 @open="handleOpen"
                 text-color="#333333"
                 :unique-opened="true"
                 @close="handleClose">

          <div v-for="(item,indexs) in list"
               :key="indexs">
            <template v-if="!item.children">
              <el-menu-item :index="item.id.toString()"
                            @click="navigateTo(item)"><span>{{item.menuName}}</span></el-menu-item>
            </template>
            <template v-else>
              <el-submenu :index="item.id.toString()">
                <template slot="title">{{item.menuName}}</template>
                <div v-if="!item.children">
                  <el-menu-item :index="item.id.toString()"><span>{{item.menuName}}</span></el-menu-item>
                </div>
                <div v-else>
                  <div v-for="(itemd,dt) in item.children"
                       :key="dt">
                    <div v-if="!itemd.children">
                      <el-menu-item :index="itemd.id.toString()"
                                    class="two"
                                    @click="navigateTo(itemd,item.menuName)">{{itemd.menuName}}</el-menu-item>
                    </div>
                    <div v-else>
                      <el-submenu :index="itemd.id.toString()">
                        <template slot="title">{{itemd.menuName}}</template>
                        <el-menu-item v-for="(itemdd,dtt) in itemd.children"
                                      class="overflow"
                                      :key="dtt"
                                      :index="itemdd.id.toString()"
                                      @click="navigateTo(itemdd,itemdd.menuName)">{{itemdd.menuName}}</el-menu-item>
                      </el-submenu>
                    </div>
                  </div>

                </div>

              </el-submenu>
            </template>

          </div>
        </el-menu>
      </el-col>
    </el-row>
  </section>
</template>

<script>

import { mapState } from "vuex";
import {  Button, Select, Menu,
  Row,
  Col,
  Submenu,
  MenuItem,
  MenuItemGroup,} from 'element-ui'
export default {
  directives: {
    clickoutside: {
      bind (el, binding) {
        function handler (e) {
          if (el.contains(e.target) || e.target.className.includes(binding.arg)) {
            return false;
          }
          if (binding.expression) {
            binding.value(e);
          }
        }
        el._zClickOutside = handler;
        document.addEventListener('click', handler);
      },
      unbind (el) {
        // 解除事件监听
        document.removeEventListener('click', el._zClickOutside);
        delete el._zClickOutside;
      }
    }
  },
  name: "search",
  data () {
    return {
      list: [

      ],
      topText: "",
      config: true
    };
  },
  computed: mapState({
    stateObject: state => state.stateObject
  }),
  props: ["pid", "topShow"],
  components: {
    elCol: Col,
    elRow: Row,
    elMenu: Menu,
    elSubmenu: Submenu,
    elMenuItem: MenuItem,
    elMenuItemGroup: MenuItemGroup,
  },
  watch: {
    pid (v, vv) {
      this.getMenuTree();
    },
    $route (v, vv) {
      this.topTextShow();
      this.getMenuTree();
    }
  },
  created () {
    this.topTextShow()
    this.getMenuTree()
  },
  methods: {
    clickOut (i) {
      // console.log(i)
      // if (i.srcElement && (i.srcElement || "").includes("submenu")) {
      //   console.log("569")
      // }
    },
    topTextShow () {
      if (sessionStorage.getItem("books") || this.stateObject.myvuex.books) {
        if (this.stateObject.myvuex.books == "Home") {
          this.topText = sessionStorage.getItem("books").split(",")[0]
        } else {
          this.topText = this.stateObject.myvuex.books.split(",")[0]
        }
      }

    },
    getMenuTree () {
      let self = this
      Driver.proxy(
        "api",
        {
          apiPath: apiConfig.member.getMenuTree,
          mode: "post",
          data: {
            pid: this.pid || 0
          }
        },
        function (suc) {
          self.list = suc.data
        },
        function (err) {

        }
      );
    },
    handleOpen (key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose (key, keyPath) {
      console.log(key, keyPath);
    },
    navigateTo (item, sectit = '', firtit = '') {
      if (item.menuName == "RLB Exchange Rates") {
          this.tourl("/front/article?articleId=10000");
          return;
      }
      if (item.children) {
        return
      } else {
        let firtab = firtit != '' ? (firtit + ',') : '';
        let sectab = sectit != '' ? (sectit + ',') : '';
        let obj = {
          myvuex: {
            books: firtab + sectab + item.menuName,
            menuid: item.id
          },
        };
        sessionStorage.setItem("books", obj.myvuex.books)
        this.$store.commit('stateFn', obj);
        let pid = ""
        if (this.$route.query.pid) {
          pid = this.$route.query.pid
        } else {
          pid = item.pid
        }
        this.$router.push({ path: '/front/commons', query: { "pid": pid, "ids": item.id, "templateId": item.templateId, "entityId": item.entityId, "time": new Date().getTime() } });
      }
    },
  }
};
</script>
<style lang="scss" >
.tac > div > ul > div {
  border-bottom: 1px solid #ddbaba;
}

.side {
  .el-menu-vertical-demo {
    width: 1000px;
    z-index: 500;
  }
  .el-menu-vertical-demo > div > li {
    text-align: left !important;
  }
  .el-menu-vertical-demo > div:nth-of-type(3) > div > li {
    text-align: left !important;
  }
  .el-menu-vertical-demo > div {
    float: left;
    width: 200px;
  }
  .el-submenu__title {
    text-align: left !important;
    width: 200px;
  }
  .el-submenu__title i {
    // right: 20px !important;
    color: #333333 !important;
    font-size: 20px !important;
    // left: -125px !important;
    top: 24px;
  }
  .el-menu-item {
    text-align: center;
    font-size: 14px;
    background: #f3e6e6;
  }
  .el-menu-item:hover {
    background: #ecf5ff;
  }
}
</style>
<style lang="scss" scoped>
.row {
  display: flex;
  height: 56px;
}
.pointer {
  cursor: pointer;
}
.two {
  text-align: left !important;
}
.sec {
  margin-right: 30px;
}
.p1 {
  width: 200px;
  height: 56px;
  background: #850c0c;
  color: white;
  font-size: 16px;
  text-align: center;
  line-height: 56px;
}
.tac {
  width: 200px;
  box-sizing: border-box;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  box-sizing: border-box;
}
.overflow {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>
<style lang="scss" >
.el-submenu > div {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.sec {
  .el-submenu__title {
    font-size: 16px;
    text-align: center;
  }
  .el-submenu {
    background: #f3e6e6;
  }
  .el-submenu .el-menu-item {
    background: #ddbaba;
    text-align: center;
  }
  .el-menu-item.is-active {
    color: #850c0c;
  }
}
</style>